/**
 * Created by wangjian on 2017/10/16.
 */

app.component("winitButton", {
  //基本模板，只需要在js中代入参数
  template:
    '<button class="btn btn-default btn-rounded" ng-click="$ctrl.click($ctrl.backData)" ng-disabled="$ctrl.isdisabled" ng-show="$ctrl.isshow">{{ $ctrl.value }}</button>',
  bindings: {
    value: "=",
    isdisabled: "<",
    isshow: "<",
    fonClick: "&",
    backData: "@"
  },
  //下面是参数回调，根据需要配置
  controller: function($scope) {
    var ctrl = this;
    var backData = "";
    ctrl.isdisabled = false;
    ctrl.isshow = true;
    ctrl.click = function(x) {
      ctrl.fonClick({ backData: x });
    };
  }
});

app.component("winitButtons", {
  //基本模板，只需要在js中代入参数
  template:
    '<button class="btn m-b-xs w-xs btn-primary btn-rounded" ng-click="$ctrl.click($ctrl.save)" ng-disabled="$ctrl.isdisabled">保存</button>' +
    '<button  class="btn m-b-xs w-xs btn-default btn-rounded" ng-click="$ctrl.click($ctrl.cancel)">取消</button>',
  bindings: {
    fonClick: "&",
    isdisabled: "<"
  },
  //下面是参数回调，根据需要配置
  controller: function($scope) {
    var ctrl = this;
    ctrl.type = "";
    ctrl.save = "save";
    ctrl.cancel = "cancel";
    ctrl.click = function(x) {
      ctrl.fonClick({ type: x });
    };
  }
});

app.component("winitSelectUser", {
  templateUrl: getTemplateUrl("matrix/component/tpl/winitSelectUser.html"),
  bindings: {
    fonChange: "&",
    thisAccount: "=",
    thisRealname: "=",
    roleName: "@" //人员角色
  },
  controller: function($scope) {
    var ctrl = this;
    var user = "?token_id=" + getTokenId();
    ctrl.selectdata = null;
    ctrl.backData = {};
    if (ctrl.roleName != undefined) {
      user += "&role_name=" + ctrl.roleName;
    }
    ctrl.selectThis = function(x) {
      ctrl.thisAccount = x.account;
      ctrl.thisRealname = x.realname;
    };
    $.ajax({
      type: "get",
      url: beetle_auth_url + "/user/" + user,
      async: false,
      success: function(data) {
        if (data.success == true) {
          ctrl.selectList = data.data;
          if (
            ctrl.thisAccount != undefined &&
            ctrl.thisAccount != null &&
            ctrl.thisAccount != ""
          ) {
            angular.forEach(ctrl.selectList, function(obj) {
              if (obj.account == ctrl.thisAccount) {
                ctrl.selectdata = obj;
              }
            });
          }
          if (ctrl.selectdata == null && ctrl.selectList.length > 0) {
            ctrl.selectdata = ctrl.selectList[0];
            ctrl.selectThis(ctrl.selectdata);
          }
        }
      }
    });
  }
});

app.component("winitSelect", {
  templateUrl: getTemplateUrl("matrix/component/tpl/winitSelect.html"),
  bindings: {
    label: "@", //下拉框前的提示
    datalist: "<", //下拉框里的值\selectdata是我在controller里写的一部分固定值list
    optiondataValue: "@", //返回的key
    optiondata: "@", //展示的key
    widthdata: "@", //样式宽度
    fonChange: "&",
    modeldata: "=",
    returnObj: "@",
    onInit: "@" //默认选中
  },
  controller: function($scope) {
    var ctrl = this;
    if (
      ctrl.onInit != undefined &&
      ctrl.onInit &&
      ctrl.modeldata == undefined
    ) {
      ctrl.modeldata = ctrl.datalist[0][ctrl.optiondataValue];
    }
    if (
      ctrl.widthdata == undefined ||
      ctrl.widthdata == null ||
      ctrl.widthdata == ""
    ) {
      ctrl.widthdata = "300px";
    }
    angular.forEach(ctrl.datalist, function(obj) {
      if (ctrl.optiondataValue != undefined) {
        if (obj[ctrl.optiondataValue] == ctrl.modeldata) {
          ctrl.select = obj;
        }
      } else {
        if (obj[ctrl.optiondata] == ctrl.modeldata) {
          ctrl.select = obj;
        }
      }
    });

    ctrl.selectThis = function(a) {
      if (ctrl.returnObj == undefined) {
        if (ctrl.optiondataValue != undefined) {
          ctrl.modeldata = a[ctrl.optiondataValue];
        } else {
          ctrl.modeldata = a[ctrl.optiondata];
        }
      } else {
        ctrl.modeldata = a;
      }
      ctrl.fonChange({ info: a });
    };
  }
});

app.component("winitTextNumber", {
  templateUrl: getTemplateUrl("matrix/component/tpl/winitTextNumber.html"),
  bindings: {
    numberData: "=",
    numberMax: "=",
    isDisabled: "="
  },
  controller: function($scope) {
    var ctrl = this;
    if (
      ctrl.numberData == undefined ||
      ctrl.numberData == null ||
      ctrl.numberData == ""
    ) {
      ctrl.numberData = 0;
    }
    if (
      ctrl.numberMax == undefined ||
      ctrl.numberMax == null ||
      ctrl.numberMax == ""
    ) {
      ctrl.numberMax = 999;
    }
  }
});

app.component("winitTextarea", {
  template:
    '<textarea maxlength="1000" class="form-control validate-textarea" ng-model="$ctrl.textdata" style="width: {{$ctrl.textareaWidth}}; height: {{$ctrl.textareaHeight}};" ng-blur="$ctrl.validateData($event, $ctrl.backdata)" placeholder="{{$ctrl.textareaPlaceholder}}"></textarea>' +
    '<span ng-show="$ctrl.data.vastat == false" style="color: red;">{{ $ctrl.valiMsg }}</span>',
  bindings: {
    textdata: "=",
    data: "=",
    validate: "=",
    fonBlur: "&",
    textareaWidth: "@",
    textareaHeight: "@",
    textareaPlaceholder: "@"
  },
  controller: function($scope) {
    var ctrl = this;
    ctrl.valiMsg = "";
    ctrl.backdata = {};
    ctrl.backdata.textdata = ctrl.textdata;

    if (
      ctrl.textareaHeight == undefined ||
      ctrl.textareaHeight == null ||
      ctrl.textareaHeight == ""
    ) {
      ctrl.textareaHeight = "100px";
    }
    ctrl.validateData = function($event, x) {
      if ($($event.currentTarget).val() == "") {
        $($event.currentTarget).css("border", "1px solid red");
      } else {
        $($event.currentTarget).css("border", "1px solid #27c24c");
      }
      if (ctrl.validate != undefined) {
        var patternData = new RegExp(ctrl.validate.regex.validate);

        if (ctrl.validate.required.validate == true) {
          if (ctrl.textdata == null || ctrl.textdata == "") {
            ctrl.data.vastat = false;
            ctrl.valiMsg = ctrl.validate.required.msg;
            ctrl.backdata.vastat = ctrl.data.vastat;
            ctrl.fonBlur({ backdata: x });
            return;
          }
        }
      }
      if (ctrl.data != undefined) {
        ctrl.data.vastat = true;
        ctrl.backdata.vastat = ctrl.data.vastat;
      }

      ctrl.fonBlur({ backdata: x });
    };
  }
});

app.component("winitCheckbox", {
  template:
    '<label  class="i-checks">' +
    '                              <input ng-model="$ctrl.ischeck" ng-change="$ctrl.checkThis()" type="checkbox">' +
    "                              <i></i>" +
    "                          </label>",
  bindings: {
    ischeck: "="
  },
  controller: function($scope) {
    var ctrl = this;
    ctrl.checkThis = function() {
      if (ctrl.ischeck == true) {
      }
    };
  }
});

app.component("winitCheckboxs", {
  template:
    '<div ng-repeat="x in $ctrl.checkList" >\n' +
    '     <label  class="i-checks">\n' +
    '         <input ng-model="x.check" type="checkbox">\n' +
    "          <i></i>\n" +
    "         <!--{ x[$ctrl.checkLabel] }}\n-->" +
    "     </label>\n" +
    "          </div>",
  bindings: {
    checkList: "<"
  },
  controller: function($scope) {
    var ctrl = this;
    /* ctrl.checkThis = function(x){
         console.log(ctrl.checkList);
         }*/
  }
});

app.component("winitSpan", {
  template: "<span>{{$ctrl.key}}</span>",
  bindings: {
    datalist: "<",
    datalistKey: "@",
    datalistValue: "@",
    datavalue: "<"
  },
  controller: function($scope) {
    var ctrl = this;
    ctrl.key = "";
    ctrl.$onChanges = function() {
      angular.forEach(ctrl.datalist, function(data) {
        if (data[ctrl.datalistValue] == ctrl.datavalue) {
          ctrl.key = data[ctrl.datalistKey];
        }
      });
    };
  }
});

app.component("winitDate", {
  template:
    "" + "<span>{{$ctrl.timeData|date:'yyyy-MM-dd HH:mm:ss':'UTC'}}</span>\n",
  bindings: {
    timeData: "<"
  },
  controller: function() {}
});

//规则, 组件名字驼峰, 元素标签中划线分割, 两者映射缺一不可.
angular.module("app").component("winitText", {
  template:
    '<input type="text" class="form-control validate-text" ng-model="$ctrl.textdata" maxlength="{{$ctrl.maxLength}}" ' +
    'ng-pattern="$ctrl.textPattern" ' +
    'ng-disabled="$ctrl.isDisabled" ng-if="$ctrl.isRequired" required="required" ' +
    'ng-blur="$ctrl.blurText($event)">' +
    '<input type="text" class="form-control" ng-model="$ctrl.textdata"' +
    ' ng-if="!$ctrl.isRequired">',
  bindings: {
    data: "=",
    textPattern: "@",
    textdata: "=",
    validate: "=",
    fonBlur: "&",
    isDisabled: "=",
    textRequired: "@",
    maxLength: "@"
  },
  controller: function($scope, $element, $attrs) {
    var ctrl = this;
    ctrl.isRequired = false;
    if (ctrl.textRequired == "true") {
      ctrl.isRequired = true;
    }
    if (ctrl.maxLength == undefined) {
      ctrl.maxLength = 30;
    }
    ctrl.blurText = function($event) {
      if ($($event.currentTarget).val() == "") {
        $($event.currentTarget).css("border", "1px solid red");
      } else {
        $($event.currentTarget).css("border", "1px solid #27c24c");
      }
    };
  }
});

app.component("mPageHead", {
  template:
    '<div class="bg-light lter b-b wrapper-md">' +
    '<h1 class="m-n font-thin h3">{{$ctrl.title}}</h1></div>',
  bindings: {
    title: "@"
  },
  controller: function() {}
});

//single ui select
/**
 * 为保证单个ui-select的通用性，在传入的数据中【itemList】，需要人为的在外面设置crtname字段（即当前ui-select要显示的name）
 * 若需要多条件查询，需要额外的传入otherValue
 */
app.component("mUiSelect", {
  template:
    "<div class='input-group' style='width: 100%'>" +
    "    <ui-select ng-model='$ctrl.selectedItem' theme='bootstrap' on-select='$ctrl.selectItem($item)' ng-disabled='$ctrl.hasDisabled'>" +
    "        <ui-select-match placeholder='{{$ctrl.prompt}}'>{{ $select.selected.crtname.length > 20 ? $select.selected.crtname.substring(0, 20) + '...' : $select.selected.crtname}}</ui-select-match>" +
    "        <ui-select-choices repeat='item in $ctrl.itmeList | filter: $select.search | limitTo:15'>" +
    "            <div ng-bind-html='item.crtname | highlight: $select.search'></div>" +
    "            <span style='font-size: 10px; font-weight: bold;' ng-if='$ctrl.hasOtherValue'>{{$ctrl.hasOtherValueTitle}}</span><small style='font-size: 12px; font-style: italic;' ng-if='$ctrl.hasOtherValue' ng-bind-html='item.otherValue | highlight: $select.search'></small>" +
    "        </ui-select-choices>" +
    "    </ui-select>" +
    "    <span class='input-group-btn' ng-if='$ctrl.trashBtn'>" +
    "        <button ng-click='$ctrl.selectedItem = undefined' class='btn btn-default'><span class='fa fa-trash'></span></button>" +
    "    </span>" +
    "</div>",
  bindings: {
    prompt: "@",
    callbackData: "<", //ui-select所需的其他数据
    selectedItem: "=", //获取选中的值
    itmeList: "<", //数据集
    selectItemFun: "&",
    hasDisabled: "<",
    trashBtn: "<",
    hasOtherValue: "<",
    hasOtherValueTitle: "@"
  },
  controller: function() {
    var ctrl = this;
    ctrl.selectItem = function(item) {
      if (ctrl.callbackData) {
        item.data = ctrl.callbackData;
      }
      ctrl.selectItemFun({ item: item });
    };
  }
});

//single selection of user
app.component("mSingleSelectUser", {
  template:
    "<ui-select ng-model='$ctrl.selectedUser' theme='bootstrap' on-select='$ctrl.selectUser($item)'>" +
    "    <ui-select-match placeholder='{{$ctrl.prompt}}'>{{$select.selected.realname}}</ui-select-match>" +
    "    <ui-select-choices repeat='user in $ctrl.userList | filter: $select.search|limitTo:15'>" +
    "        <div ng-bind-html='user.realname | highlight: $select.search'></div>" +
    "    </ui-select-choices>" +
    "</ui-select>",
  bindings: {
    prompt: "@",
    callbackData: "<",
    selectedUser: "=",
    selectUserFun: "&",
    roleName: "@", //人员角色
    uidefault: "="
  },
  controller: function($scope, $rootScope, $http, lodash) {
    var ctrl = this;
    getUserList();

    function getUserList() {
      var url = beetle_auth_url + "/user/?token_id=" + getTokenId();
      if (ctrl.roleName != undefined) {
        url += "&role_name=" + ctrl.roleName;
      }
      $http.get(url).success(function(result) {
        if (result.success) {
          if (result.data) {
            ctrl.userList = result.data;
            if (ctrl.uidefault && ctrl.selectedUser == undefined) {
              ctrl.selectedUser = lodash.findWhere(ctrl.userList, {
                realname: getUserName()
              });
            }
          } else {
            $rootScope.toasterErrorInfo("获取用户数据错误！");
          }
        } else {
          $rootScope.toasterErrorInfo(result.msg);
        }
      });
    }
    ctrl.selectUser = function(item) {
      if (ctrl.callbackData) {
        item.data = ctrl.callbackData;
      }
      ctrl.selectUserFun({ user: item });
    };
  }
});

//signle switch btn
app.component("mSingleSwitch", {
  template:
    "<span style='margin-right: 50px;'>" +
    "    <label class='i-switch bg-warning' style='margin-right: 5px;'>" +
    "        <input type='checkbox' name='switch' checked='$ctrl.defaultStatus ? false : true' ng-model='$ctrl.defaultStatus' ng-change='$ctrl.switchChange($ctrl.defaultStatus)'>" +
    "        <i></i>" +
    "    </label>" +
    "    <label class='form-control-static' style='position: absolute;' ng-style='{\"padding-top\": $ctrl.paddingTop ? $ctrl.paddingTop : \"0px\"}'>{{ $ctrl.defaultStatus ? $ctrl.showLabel : $ctrl.behindLabel }}</label>" +
    "</span>",
  bindings: {
    showLabel: "@", //第一个显示的switch名称
    behindLabel: "@", //第二个显示的switch名称
    defaultStatus: "<",
    switchChangeFun: "&",
    paddingTop: "@"
  },
  controller: function($scope) {
    var ctrl = this;

    ctrl.switchChange = function(status) {
      ctrl.switchChangeFun({ status: status });
    };
  }
});

//timeline
app.component("mTimeline", {
  template:
    "<ul style='padding: 15px 0px;'>" +
    "    <li class='tl-header'>" +
    "        <div class='btn btn-success'>{{$ctrl.startName}}</div>" +
    "    </li>" +
    "    <li class='tl-item'>" +
    "        <div class='tl-wrap b-success'>" +
    "            <span class='tl-date'></span>" +
    "            <div class='tl-content'></div>" +
    "        </div>" +
    "    </li>" +
    "    <div ng-repeat='data in $ctrl.valList'>" +
    "        <li class='tl-header'>" +
    "            <div class='btn btn-sm btn-primary btn-rounded btn-click' ng-click='$ctrl.clickNode(data)'>" +
    "                {{data.user}}" +
    "                <i class='fa fa-check text-danger pull-right text-xs select-node' data-id='{{data.id}}' style='display: none;'></i>" +
    "            </div>" +
    "        </li>" +
    "        <li class='tl-item'>" +
    "            <div class='tl-wrap b-primary'>" +
    "                <span class='tl-date'></span>" +
    "                <div class='tl-content panel padder b-a block'>" +
    "                    <span class='arrow left pull-up hidden-left'></span>" +
    "                    <span class='arrow right pull-up visible-left'></span>" +
    "                    <div class='text-lt m-b-sm' ng-click='$ctrl.clickNodeTitleFun(data)'>{{data.path}}</div>" +
    "                    <div class='panel-body pull-in b-t b-light show-node' data-id='{{data.id}}' ng-show='$index == 1'>{{data.desc}}</div>" +
    "                </div>" +
    "            </div>" +
    "        </li>" +
    "    </div>" +
    "    <li class='tl-header'>" +
    "        <div class='btn btn-sm btn-danger btn-rounded'>结束</div>" +
    "    </li>" +
    "</ul>",
  bindings: {
    startName: "@",
    valList: "<",
    clickNodeFun: "&",
    clickNodeTitleFun: "&"
  },
  controller: function($scope) {
    var ctrl = this;

    ctrl.radioClick = function(isRadio, data) {
      //console.log(!isRadio);
      //console.log(data);
    };

    ctrl.clickNode = function(data) {
      ctrl.clickNodeFun({ data: data });
    };

    ctrl.clickNodeTitleFun = function(data) {
      ctrl.clickNodeTitleFun({ data: data });
    };
  }
});

//feature line
app.component("mFeatureLine2", {
  template:
    "<div class='form-group'>" +
    "    <div class='col-sm-1 control-label'>{{$ctrl.label}}</div>" +
    "    <div class='{{ $ctrl.isMasterCol }}' ng-if='!$ctrl.isDefaultReq'>" +
    "        <a ng-if='$ctrl.isCrtReq && !$ctrl.isCompare' ng-show='$ctrl.transformTypeMeta == \"text\"' e-rows='15' e-cols='70' buttons='no' blur='submit' editable-textarea='$ctrl.leftVal' onaftersave='$ctrl.updateFeatureAttr()'>" +
    "            <pre>{{ $ctrl.leftVal || $ctrl.prompt }}</pre>" +
    "        </a>" +
    "        <div class='col-sm-10' ng-show='$ctrl.transformTypeMeta == \"form\"' ng-click='$ctrl.transformFun(\"meta\")'>" +
    "            <div ng-repeat='form in $ctrl.transformMetaValue track by $index' ng-style='{\"color\": form.color ? form.color : \"#58666e\"}' class='col-sm-6'>" +
    "                {{form.line}}" +
    "                <a href='javascript:void(0)' class='{{form.validate ? \"\" : \"hide\"}}' popover={{form.validate}} popover-trigger='mouseenter'>验</a>" +
    "            </div>" +
    "        </div>" +
    "        <div class='col-sm-10' ng-show='$ctrl.transformTypeMeta == \"flow\"' ng-click='$ctrl.transformFun(\"meta\")'>" +
    "            <div ng-repeat='flow in $ctrl.transformMetaValue track by $index' ng-style='{\"color\": flow.color ? flow.color : \"#58666e\"}'>" +
    "                {{$index + 1}}. {{flow.line}}" +
    "            </div>" +
    "        </div>" +
    "        <div class='col-sm-10' ng-show='$ctrl.transformTypeMeta == \"table\"' ng-click='$ctrl.transformFun(\"meta\")'>" +
    "            <table class='table table-bordered table-hover'>" +
    "                <tr ng-repeat='table in $ctrl.transformMetaValue track by $index'>" +
    "                    <td ng-repeat='t in table.line track by $index' ng-style='{\"color\": table.indexColor == $index ? table.color : \"\"}' ng-show='table.isTh == true'>" +
    "                        <b><span ng-hide='table.indexLink == $index'>{{t}}</span>" +
    "                        <a href='javascript:void(0)' style='text-decoration: underline' ng-show='table.indexLink == $index'>{{t}}</a></b>" +
    "                    </td>" +
    "                    <td ng-repeat='t in table.line track by $index' ng-style='{\"color\": table.indexColor == $index ? table.color : \"\"}' ng-show='table.isTh == false'>" +
    "                        <span ng-hide='table.indexLink == $index'>{{t}}</span>" +
    "                        <a href='javascript:void(0)' style='text-decoration: underline' ng-show='table.indexLink == $index'>{{t}}</a>" +
    "                    </td>" +
    "                </tr>" +
    "            </table>" +
    "        </div>" +
    "        <pre ng-if='!$ctrl.isCrtReq && !$ctrl.isCompare' class='editable-style'>{{ $ctrl.leftVal || '未定义' }}</pre>" +
    "        <pre ng-if='$ctrl.isCompare' class='compare-pre' line-diff left-obj='$ctrl.leftVal' right-obj='$ctrl.rightVal'></pre>" +
    "    </div>" +
    "    <div ng-class='$ctrl.isColSm' ng-show='$ctrl.isShowMaster'>" +
    "        <a ng-if='$ctrl.isOnlyMaster' ng-show='$ctrl.transformTypeMaster == \"text\"' e-rows='15' e-cols='70' buttons='no' blur='submit' editable-textarea='$ctrl.rightVal' onaftersave='$ctrl.updateFeatureAttr()'>" +
    "            <pre>{{ $ctrl.rightVal || $ctrl.prompt }}</pre> " +
    "        </a>" +
    "        <div class='col-sm-10' ng-show='$ctrl.transformTypeMaster == \"form\"' ng-click='!$ctrl.isOnlyMaster ? \"\" : $ctrl.transformFun(\"master\")'>" +
    "            <div ng-repeat='form in $ctrl.transformMasterValue track by $index' ng-style='{\"color\": form.color ? form.color : \"#58666e\"}' class='col-sm-6'>" +
    "                {{form.line}}" +
    "                <a href='javascript:void(0)' class='{{form.validate ? \"\" : \"hide\"}}' popover={{form.validate}} popover-trigger='mouseenter'>验</a>" +
    "            </div>" +
    "        </div>" +
    "        <div class='col-sm-10' ng-show='$ctrl.transformTypeMaster == \"flow\"' ng-click='!$ctrl.isOnlyMaster ? \"\" : $ctrl.transformFun(\"master\")'>" +
    "            <div ng-repeat='flow in $ctrl.transformMasterValue track by $index' ng-style='{\"color\": flow.color ? flow.color : \"#58666e\"}'>" +
    "                {{$index + 1}}. {{flow.line}}" +
    "            </div>" +
    "        </div>" +
    "        <div class='col-sm-10' ng-show='$ctrl.transformTypeMaster == \"table\"' ng-click='!$ctrl.isOnlyMaster ? \"\" : $ctrl.transformFun(\"master\")'>" +
    "            <table class='table table-bordered table-hover'>" +
    "                <tr ng-repeat='table in $ctrl.transformMasterValue track by $index'>" +
    "                    <td ng-repeat='t in table.line track by $index' style='background-color: #f5f5f5;' ng-style='{\"color\": table.indexColor == $index ? table.color : \"\"}' ng-show='table.isTh == true'>" +
    "                        <b><span ng-hide='table.indexLink == $index'>{{t}}</span>" +
    "                        <a href='javascript:void(0)' style='text-decoration: underline' ng-show='table.indexLink == $index'>{{t}}</a></b>" +
    "                    </td>" +
    "                    <td ng-repeat='t in table.line track by $index' ng-style='{\"color\": table.indexColor == $index ? table.color : \"\"}'  ng-show='table.isTh == false'>" +
    "                        <span ng-hide='table.indexLink == $index'>{{t}}</span>" +
    "                        <a href='javascript:void(0)' style='text-decoration: underline' ng-show='table.indexLink == $index'>{{t}}</a>" +
    "                    </td>" +
    "                </tr>" +
    "            </table>" +
    "        </div>" +
    "        <pre class='editable-style editable-compare' ng-if='!$ctrl.isOnlyMaster' ng-show='$ctrl.transformTypeMaster == \"text\"'>{{ $ctrl.rightVal || '未定义' }}</pre>" +
    "    </div>" +
    "</div>",
  bindings: {
    label: "@",
    prompt: "@",
    transformType: "<",
    leftVal: "<",
    rightVal: "<",
    isDefaultReq: "<",
    isColSm: "@",
    isCrtReq: "<",
    isCompare: "<",
    isOnlyMaster: "<",
    isMasterCol: "@",
    isShowMaster: "<",
    updateFun: "&",
    transformFun: "&"
  },
  controller: function($scope, lodash) {
    var ctrl = this;
    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.leftVal) {
          if (data.leftVal.currentValue) {
            setTransformLine(data.leftVal.currentValue, "meta");
          } else {
            ctrl.transformTypeMeta = "text";
            ctrl.transformMetaValue = "";
          }
        }
        if (data.rightVal) {
          if (data.rightVal.currentValue) {
            setTransformLine(data.rightVal.currentValue, "master");
          } else {
            ctrl.transformTypeMaster = "text";
            ctrl.transformMasterValue = "";
          }
        }
      } else {
        console.log("获取transform数据错误！");
      }
    };

    ctrl.updateFeatureAttr = function() {
      ctrl.transformTypeMeta = lodash.trim(ctrl.leftVal.split("|")[0]);
      ctrl.transformTypeMaster = lodash.trim(ctrl.rightVal.split("|")[0]);
      var updateAttr = { metaData: ctrl.leftVal, master: ctrl.rightVal };
      ctrl.updateFun({ data: updateAttr });
    };

    ctrl.transformFun = function(type) {
      if (type == "meta") {
        ctrl.transformTypeMeta = "text";
      } else {
        ctrl.transformTypeMaster = "text";
      }
    };

    function setTransformLine(transformLine, type) {
      if (angular.isString(transformLine) && transformLine.split("|")[1]) {
        if (type == "meta") {
          ctrl.transformTypeMeta = lodash.trim(transformLine.split("|")[0]);
          ctrl.transformMetaValue = switchTransformType(transformLine);
        } else {
          ctrl.transformTypeMaster = lodash.trim(transformLine.split("|")[0]);
          ctrl.transformMasterValue = switchTransformType(transformLine);
        }
      } else {
        if (type == "meta") {
          ctrl.transformTypeMeta = "text";
        } else {
          ctrl.transformTypeMaster = "text";
        }
      }
    }

    //获取转换类型
    function switchTransformType(data) {
      if (!data) {
        $rootScope.toasterWarningInfo("文本框内容不能为空！");
        return false;
      }
      var transformType = data.split("|");
      if (lodash.trim(transformType[0]) == "form") {
        return transformToForm(transformType[1]);
      }
      if (lodash.trim(transformType[0]) == "flow") {
        return transformToFlow(transformType[1]);
      }
      if (lodash.trim(transformType[0]) == "table") {
        return transformToTable(transformType[1]);
      }
    }

    //转换成表单
    function transformToForm(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(value, index) {
        var elements = value.split(",");
        if (elements) {
          var eleArray = [];
          var eleLine = "";
          if (elements[1]) {
            eleLine = elements[1];
          }
          if (elements[0] == "*") {
            eleLine += "（必填）";
          }
          if (elements[2]) {
            eleLine += " [ " + elements[2] + " ] ";
          }
          if (elements[1]) {
            eleLine += "：";
          }
          if (elements[3]) {
            eleLine += elements[3];
          }
          eleArray["line"] = eleLine;
          var eleColor = "";
          switch (elements[4]) {
            case "add":
              eleColor += "green";
              break;
            case "update":
              eleColor += "orange";
              break;
          }
          eleArray["color"] = eleColor;
          eleArray["validate"] = elements[5] ? elements[5] : "";
          transformResult.push(eleArray);
        }
      });
      return transformResult;
    }

    function transformToNewForm(data) {
      var transformResult = [];
      var transformType = data.split("\n");
      angular.forEach(lodash.drop(transformType), function(formElements) {
        var elements = formElements.split(":");
        //combo-select
        if (lodash.trim(elements[0]) == "combo-select") {
          var comboItem = setComboSelect(elements[1]);
          transformResult.push(comboItem);
        }
        //select
        if (lodash.trim(elements[0]) == "select") {
          var selectItem = setSelect(elements[1]);
          transformResult.push(selectItem);
        }
        //input
        if (lodash.trim(elements[0]) == "input") {
          var inputItem = setInput(elements[1]);
          transformResult.push(inputItem);
        }
        //date
        if (lodash.trim(elements[0]) == "date") {
          var dateItem = setDate(elements[1]);
          transformResult.push(dateItem);
        }
        //date & dateEnd
        if (lodash.trim(elements[0]) == "date-to") {
          var dateEnd = setDateEnd(elements[1]);
          transformResult.push(dateEnd);
        }
        //search button
        if (lodash.trim(elements[0]) == "search-button") {
          $ctrl.showSearchButton = elements[1] ? true : false;
        }
      });

      //set combo-select
      function setComboSelect(elements) {
        var item = { type: "combo-select", value: elements };
        if (elements.split("|")[1] == "update") {
          item.value = lodash.trim(elements.split("|")[0]);
          item.status == true;
        }
        return item;
      }

      //set select
      function setSelect(elements) {
        var item = { type: "select", value: elements.split(",") };
        return item;
      }

      //set input
      function setInput(elements) {
        var item = { type: "input", value: elements };
        return item;
      }

      //set date
      function setDate(elements) {
        var item = { type: "date", value: elements.split(";") };
        return item;
      }

      //set dateEnd
      function setDateEnd(elements) {
        var item = { type: "dateEnd", value: elements };
        return item;
      }

      return transformResult;
    }

    //转换成步骤
    function transformToFlow(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(value, index) {
        var elements = value.split(",");
        if (elements) {
          var eleArray = [];
          eleArray["line"] = elements[0];
          if (elements[1] == "add") {
            eleArray["color"] = "green";
          }
          if (elements[1] == "update") {
            eleArray["color"] = "orange";
          }
        }
        transformResult.push(eleArray);
      });
      return transformResult;
    }

    //转换成表格
    function transformToTable(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(data) {
        var elements = data.split(",");
        var eleArray = [];
        eleArray["line"] = elements;
        angular.forEach(elements, function(value, index) {
          var data = value.split(" ");
          if (data[1] == "update") {
            eleArray["color"] = "red";
            eleArray["indexColor"] = index;
          }
          if (data[1] == "link") {
            eleArray["link"] = true;
            eleArray["indexLink"] = index;
          }
        });
        transformResult.push(eleArray);
      });
      angular.forEach(transformResult, function(res) {
        res.color = transformResult[0].color;
        res.indexColor = transformResult[0].indexColor;
        res.link = transformResult[0].link;
        res.indexLink = transformResult[0].indexLink;
        res.isTh = false;
      });
      transformResult[0].isTh = true;
      angular.forEach(transformResult, function(res) {
        var itemArray = [];
        angular.forEach(res.line, function(line) {
          if (line.split(" ")[1]) {
            itemArray.push(line.split(" ")[0]);
          } else {
            itemArray.push(line);
          }
        });
        res.line = itemArray;
      });
      console.log(transformResult);
      return transformResult;
    }
  }
});

//feature line
app.component("mFeatureLine", {
  template:
    "<div class='form-group'>" +
    "    <div class='col-sm-1 control-label'>{{$ctrl.label}}</div>" +
    "    <div class='{{ $ctrl.isMasterCol }}' ng-if='!$ctrl.isDefaultReq' ng-show='$ctrl.isShowReq'>" +
    "        <div ng-show='!$ctrl.isReadOnly'>" +
    "            <pre class='editable-style'>{{ $ctrl.leftVal || '未定义' }}</pre>" +
    "        </div>" +
    "        <div ng-show='$ctrl.isReadOnly'>" +
    "        <div ng-show='$ctrl.isSelfReqId == -1'>" +
    "            <a e-rows='15' e-cols='70' buttons='no' blur='submit' editable-textarea='$ctrl.rightVal' onaftersave='$ctrl.updateFeatureAttr()'>" +
    "                <pre>{{ $ctrl.rightVal || $ctrl.prompt }}</pre>" +
    "            </a>" +
    "        </div>" +
    "        <div ng-show='$ctrl.isSelfReqId != -1'>" +
    "            <a ng-if='$ctrl.isCrtReq && !$ctrl.isCompare' e-rows='15' e-cols='70' buttons='no' blur='submit' editable-textarea='$ctrl.leftVal' onaftersave='$ctrl.updateFeatureAttr()'>" +
    "                <pre>{{ $ctrl.leftVal || $ctrl.prompt }}</pre>" +
    "            </a>" +
    "            <pre ng-if='!$ctrl.isCrtReq && !$ctrl.isCompare' class='editable-style'>{{ $ctrl.leftVal || '未定义' }}</pre>" +
    "            <pre ng-if='$ctrl.isCompare' class='compare-pre' line-diff left-obj='$ctrl.leftVal' right-obj='$ctrl.rightVal'></pre>" +
    "        </div>" +
    "        </div>" +
    "    </div>" +
    "    <div ng-class='$ctrl.isColSm' ng-show='$ctrl.isShowMaster'>" +
    "        <a ng-if='$ctrl.isOnlyMaster' e-rows='15' e-cols='70' buttons='no' blur='submit' editable-textarea='$ctrl.rightVal' onaftersave='$ctrl.updateFeatureAttr()'>" +
    "            <pre>{{ $ctrl.rightVal || $ctrl.prompt }}</pre> " +
    "        </a>" +
    "        <pre class='editable-style editable-compare' ng-if='!$ctrl.isOnlyMaster' ng-show='$ctrl.transformTypeMaster == \"text\"'>{{ $ctrl.rightVal || '未定义' }}</pre>" +
    "    </div>" +
    "    <div class='col-sm-10' ng-if='$ctrl.isDefaultReq && !$ctrl.isOnlyMaster' ng-show='!$ctrl.isShowMaster'>" +
    "        <a ng-if='$ctrl.isOnlyMaster' e-rows='15' e-cols='70' buttons='no' blur='submit' editable-textarea='$ctrl.rightVal' onaftersave='$ctrl.updateFeatureAttr()'>" +
    "            <pre>{{ $ctrl.rightVal || $ctrl.prompt }}</pre> " +
    "        </a>" +
    "        <pre class='editable-style editable-compare' ng-if='!$ctrl.isOnlyMaster' ng-show='$ctrl.transformTypeMaster == \"text\"'>{{ $ctrl.rightVal || '未定义' }}</pre>" +
    "    </div>" +
    "</div>",
  bindings: {
    label: "@",
    prompt: "@",
    transformType: "<",
    leftVal: "<",
    rightVal: "<",
    isDefaultReq: "<",
    isColSm: "@",
    isCrtReq: "<",
    isCompare: "<",
    isOnlyMaster: "<",
    isMasterCol: "@",
    isShowMaster: "<",
    isShowReq: "<",
    updateFun: "&",
    isReadOnly: "<",
    isSelfReqId: "<",
    transformFun: "&"
  },
  controller: function($scope, lodash) {
    var ctrl = this;
    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.leftVal) {
          if (data.leftVal.currentValue) {
            setTransformLine(data.leftVal.currentValue, "meta");
          } else {
            ctrl.transformTypeMeta = "text";
            ctrl.transformMetaValue = "";
          }
        }
        if (data.rightVal) {
          if (data.rightVal.currentValue) {
            setTransformLine(data.rightVal.currentValue, "master");
          } else {
            ctrl.transformTypeMaster = "text";
            ctrl.transformMasterValue = "";
          }
        }
      } else {
        console.log("获取transform数据错误！");
      }
    };

    ctrl.updateFeatureAttr = function() {
      // ctrl.transformTypeMeta = lodash.trim(ctrl.leftVal.split("|")[0]);
      // ctrl.transformTypeMaster = lodash.trim(ctrl.rightVal.split("|")[0]);
      var updateAttr = { metaData: ctrl.leftVal, master: ctrl.rightVal };
      ctrl.updateFun({ data: updateAttr });
    };

    ctrl.transformFun = function(type) {
      if (type == "meta") {
        ctrl.transformTypeMeta = "text";
      } else {
        ctrl.transformTypeMaster = "text";
      }
    };

    function setTransformLine(transformLine, type) {
      if (angular.isString(transformLine) && transformLine.split("|")[1]) {
        if (type == "meta") {
          ctrl.transformTypeMeta = lodash.trim(transformLine.split("|")[0]);
          ctrl.transformMetaValue = switchTransformType(transformLine);
        } else {
          ctrl.transformTypeMaster = lodash.trim(transformLine.split("|")[0]);
          ctrl.transformMasterValue = switchTransformType(transformLine);
        }
      } else {
        if (type == "meta") {
          ctrl.transformTypeMeta = "text";
        } else {
          ctrl.transformTypeMaster = "text";
        }
      }
    }

    //获取转换类型
    function switchTransformType(data) {
      if (!data) {
        $rootScope.toasterWarningInfo("文本框内容不能为空！");
        return false;
      }
      var transformType = data.split("|");
      if (lodash.trim(transformType[0]) == "form") {
        return transformToForm(transformType[1]);
      }
      if (lodash.trim(transformType[0]) == "flow") {
        return transformToFlow(transformType[1]);
      }
      if (lodash.trim(transformType[0]) == "table") {
        return transformToTable(transformType[1]);
      }
    }

    //转换成表单
    function transformToForm(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(value, index) {
        var elements = value.split(",");
        if (elements) {
          var eleArray = [];
          var eleLine = "";
          if (elements[1]) {
            eleLine = elements[1];
          }
          if (elements[0] == "*") {
            eleLine += "（必填）";
          }
          if (elements[2]) {
            eleLine += " [ " + elements[2] + " ] ";
          }
          if (elements[1]) {
            eleLine += "：";
          }
          if (elements[3]) {
            eleLine += elements[3];
          }
          eleArray["line"] = eleLine;
          var eleColor = "";
          switch (elements[4]) {
            case "add":
              eleColor += "green";
              break;
            case "update":
              eleColor += "orange";
              break;
          }
          eleArray["color"] = eleColor;
          eleArray["validate"] = elements[5] ? elements[5] : "";
          transformResult.push(eleArray);
        }
      });
      return transformResult;
    }

    function transformToNewForm(data) {
      var transformResult = [];
      var transformType = data.split("\n");
      angular.forEach(lodash.drop(transformType), function(formElements) {
        var elements = formElements.split(":");
        //combo-select
        if (lodash.trim(elements[0]) == "combo-select") {
          var comboItem = setComboSelect(elements[1]);
          transformResult.push(comboItem);
        }
        //select
        if (lodash.trim(elements[0]) == "select") {
          var selectItem = setSelect(elements[1]);
          transformResult.push(selectItem);
        }
        //input
        if (lodash.trim(elements[0]) == "input") {
          var inputItem = setInput(elements[1]);
          transformResult.push(inputItem);
        }
        //date
        if (lodash.trim(elements[0]) == "date") {
          var dateItem = setDate(elements[1]);
          transformResult.push(dateItem);
        }
        //date & dateEnd
        if (lodash.trim(elements[0]) == "date-to") {
          var dateEnd = setDateEnd(elements[1]);
          transformResult.push(dateEnd);
        }
        //search button
        if (lodash.trim(elements[0]) == "search-button") {
          $ctrl.showSearchButton = elements[1] ? true : false;
        }
      });

      //set combo-select
      function setComboSelect(elements) {
        var item = { type: "combo-select", value: elements };
        if (elements.split("|")[1] == "update") {
          item.value = lodash.trim(elements.split("|")[0]);
          item.status == true;
        }
        return item;
      }

      //set select
      function setSelect(elements) {
        var item = { type: "select", value: elements.split(",") };
        return item;
      }

      //set input
      function setInput(elements) {
        var item = { type: "input", value: elements };
        return item;
      }

      //set date
      function setDate(elements) {
        var item = { type: "date", value: elements.split(";") };
        return item;
      }

      //set dateEnd
      function setDateEnd(elements) {
        var item = { type: "dateEnd", value: elements };
        return item;
      }

      return transformResult;
    }

    //转换成步骤
    function transformToFlow(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(value, index) {
        var elements = value.split(",");
        if (elements) {
          var eleArray = [];
          eleArray["line"] = elements[0];
          if (elements[1] == "add") {
            eleArray["color"] = "green";
          }
          if (elements[1] == "update") {
            eleArray["color"] = "orange";
          }
        }
        transformResult.push(eleArray);
      });
      return transformResult;
    }

    //转换成表格
    function transformToTable(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(data) {
        var elements = data.split(",");
        var eleArray = [];
        eleArray["line"] = elements;
        angular.forEach(elements, function(value, index) {
          var data = value.split(" ");
          if (data[1] == "update") {
            eleArray["color"] = "red";
            eleArray["indexColor"] = index;
          }
          if (data[1] == "link") {
            eleArray["link"] = true;
            eleArray["indexLink"] = index;
          }
        });
        transformResult.push(eleArray);
      });
      angular.forEach(transformResult, function(res) {
        res.color = transformResult[0].color;
        res.indexColor = transformResult[0].indexColor;
        res.link = transformResult[0].link;
        res.indexLink = transformResult[0].indexLink;
        res.isTh = false;
      });
      transformResult[0].isTh = true;
      angular.forEach(transformResult, function(res) {
        var itemArray = [];
        angular.forEach(res.line, function(line) {
          if (line.split(" ")[1]) {
            itemArray.push(line.split(" ")[0]);
          } else {
            itemArray.push(line);
          }
        });
        res.line = itemArray;
      });
      console.log(transformResult);
      return transformResult;
    }
  }
});

app.component("mTransForm", {
  template:
    "<div class='m-transform'>" +
    "    <div class='col-sm-12' ng-show='$ctrl.transformType == \"text\"'>" +
    "        <pre style='padding: 0px; margin: 0px; margin-top: 8px;'>{{$ctrl.transformValue}}</pre>" +
    "    </div>" +
    "    <div class='col-sm-12' ng-show='$ctrl.transformType == \"form\"'>" +
    "        <div ng-repeat='form in $ctrl.transformValue track by $index' ng-if='$ctrl.transformValue.length' ng-style='{\"color\": form.color ? form.color : \"#58666e\"}' class='col-sm-6'>" +
    "            {{form.line}}" +
    "            <a href='javascript:void(0)' class='{{form.validate ? \"\" : \"hide\"}}' popover={{form.validate}} popover-trigger='mouseenter'>验</a>" +
    "        </div>" +
    "    </div>" +
    "    <div class='col-sm-12' ng-show='$ctrl.transformType == \"flow\"'>" +
    "        <div ng-repeat='flow in $ctrl.transformValue track by $index' ng-if='$ctrl.transformValue.length' ng-style='{\"color\": flow.color ? flow.color : \"#58666e\"}'>" +
    "            {{$index + 1}}. {{flow.line}}" +
    "        </div>" +
    "    </div>" +
    "    <div class='col-sm-12' ng-show='$ctrl.transformType == \"table\"'>" +
    "        <table class='table table-bordered table-hover' ng-if='$ctrl.transformValue.length'>" +
    "            <tr ng-repeat='table in $ctrl.transformValue track by $index'>" +
    "                <td ng-repeat='t in table.line track by $index' style='background-color: #f5f5f5;' ng-style='{\"color\": table.indexColor == $index ? table.color : \"\"}' ng-show='table.isTh == true'>" +
    "                    <b>" +
    "                       <span ng-hide='{{table.indexLink == $index}}'>{{t}}</span>" +
    "                       <a href='javascript:void(0)' ng-show='{{table.indexLink == $index}}'>{{t}}</a>" +
    "                    </b>" +
    "                </td>" +
    "                <td ng-repeat='t in table.line track by $index' ng-style='{\"color\": table.indexColor == $index ? table.color : \"\"}' ng-show='table.isTh == false'>" +
    "                    <span ng-hide='table.indexLink == $index'>{{t}}</span>" +
    "                    <a href='javascript:void(0)' style='text-decoration: underline' ng-show='table.indexLink == $index'>{{t}}</a>" +
    "                </td>" +
    "            </tr>" +
    "        </table>" +
    "    </div>" +
    "</div>",
  bindings: {
    transformData: "<"
  },
  controller: function($scope, lodash) {
    var ctrl = this;
    ctrl.transformType = "text";
    ctrl.transformValue = [];

    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.transformData) {
          if (data.transformData.currentValue) {
            setTransformLine(data.transformData.currentValue);
          }
        }
      } else {
        console.log("获取transform数据错误！");
      }
    };

    function setTransformLine(transformLine) {
      if (transformLine.split("|")[1]) {
        ctrl.transformValue = switchTransformType(transformLine);
        ctrl.transformType = lodash.trim(transformLine.split("|")[0]);
      } else {
        ctrl.transformValue = ctrl.transformData;
        ctrl.transformType = "text";
      }
    }

    //获取转换类型
    function switchTransformType(data) {
      if (!data) {
        $rootScope.toasterWarningInfo("文本框内容不能为空！");
        return false;
      }
      var transformType = data.split("|");
      if (lodash.trim(transformType[0]) == "form") {
        return transformToForm(transformType[1]);
      }
      if (lodash.trim(transformType[0]) == "flow") {
        return transformToFlow(transformType[1]);
      }
      if (lodash.trim(transformType[0]) == "table") {
        return transformToTable(transformType[1]);
      }
    }

    //转换成表单
    function transformToForm(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(value, index) {
        var elements = value.split(",");
        if (elements) {
          var eleArray = [];
          var eleLine = "";
          if (elements[1]) {
            eleLine = elements[1];
          }
          if (elements[0] == "*") {
            eleLine += "（必填）";
          }
          if (elements[2]) {
            eleLine += " [ " + elements[2] + " ] ";
          }
          if (elements[1]) {
            eleLine += "：";
          }
          if (elements[3]) {
            eleLine += elements[3];
          }
          eleArray["line"] = eleLine;
          var eleColor = "";
          switch (elements[4]) {
            case "add":
              eleColor += "green";
              break;
            case "update":
              eleColor += "orange";
              break;
          }
          eleArray["color"] = eleColor;
          eleArray["validate"] = elements[5] ? elements[5] : "";
          transformResult.push(eleArray);
        }
      });
      return transformResult;
    }

    //转换成步骤
    function transformToFlow(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(value, index) {
        var elements = value.split(",");
        if (elements) {
          var eleArray = [];
          eleArray["line"] = elements[0];
          if (elements[1] == "add") {
            eleArray["color"] = "green";
          }
          if (elements[1] == "update") {
            eleArray["color"] = "orange";
          }
        }
        transformResult.push(eleArray);
      });
      return transformResult;
    }

    //转换成表格
    function transformToTable(transformValue) {
      var transformResult = [];
      angular.forEach(transformValue.split("\n"), function(data) {
        var elements = data.split(",");
        var eleArray = [];
        eleArray["line"] = elements;
        angular.forEach(elements, function(value, index) {
          var data = value.split(" ");
          if (data[1] == "update") {
            eleArray["color"] = "red";
            eleArray["indexColor"] = index;
          }
          if (data[1] == "link") {
            eleArray["link"] = true;
            eleArray["indexLink"] = index;
          }
        });
        transformResult.push(eleArray);
      });
      angular.forEach(transformResult, function(res) {
        res.color = transformResult[0].color;
        res.indexColor = transformResult[0].indexColor;
        res.link = transformResult[0].link;
        res.indexLink = transformResult[0].indexLink;
        res.isTh = false;
      });
      transformResult[0].isTh = true;
      angular.forEach(transformResult, function(res) {
        var itemArray = [];
        angular.forEach(res.line, function(line) {
          if (line.split(" ")[1]) {
            itemArray.push(line.split(" ")[0]);
          } else {
            itemArray.push(line);
          }
        });
        res.line = itemArray;
      });
      return transformResult;
    }
  }
});

//feature select line
app.component("mFeatureSelectLine", {
  template:
    "<div class='form-group'>" +
    "    <div class='col-sm-1 control-label'>{{$ctrl.label}}</div>" +
    "    <div class='{{ $ctrl.isMasterCol }}' ng-if='!$ctrl.isDefaultReq'>" +
    "        <div ng-if='$ctrl.isCrtReq'>" +
    "            <ui-select multiple ng-model='$ctrl.selectedVal' theme='bootstrap' ng-disabled='disabled' on-select='$ctrl.addSelected($item, $ctrl.currenType, $ctrl.featureStatus)' on-remove='$ctrl.removeSelected($item, $ctrl.currenType, $ctrl.featureStatus)'>" +
    "                <ui-select-match placehoder='点击查询...'>{{$item.name}}</ui-select-match>" +
    "                <ui-select-choices repeat='data in $ctrl.dataList | propsFilter: {name: $select.search}'>" +
    "                    <div ng-bind-html='data.name | highlight: $select.search'></div>" +
    "                </ui-select-choices>" +
    "            </ui-select>" +
    "        </div>" +
    "        <div ng-if='!$ctrl.isCrtReq'>" +
    "            <p class='form-control-static' ng-if='$ctrl.selectedVal.length == 0'>" +
    "                <a class='editable-style'>未定义</a>" +
    "            </p>" +
    "            <div class='list-group bg-white list-selected-value' ng-if='$ctrl.selectedVal.length > 0'>" +
    "                <a class='list-group-item selected-item' ng-repeat='select in $ctrl.selectedVal'>{{select.name}}</a>" +
    "            </div>" +
    "        </div>" +
    "    </div>" +
    "    <div ng-class='$ctrl.isColSm' ng-if='$ctrl.isShowMaster'>" +
    "        <p class='form-control-static' ng-if='$ctrl.sltMasterVal.length == 0 && !$ctrl.isOnlyMaster'>" +
    "            <a class='editable-style'>未定义</a>" +
    "        </p>" +
    "        <div class='list-group bg-white list-selected-value' ng-if='$ctrl.sltMasterVal.length > 0 && !$ctrl.isOnlyMaster'>" +
    "            <a class='list-group-item selected-item' ng-repeat='select in $ctrl.sltMasterVal'>{{select.name}}</a>" +
    "        </div>" +
    "        <div ng-if='$ctrl.isOnlyMaster'>" +
    "            <ui-select multiple ng-model='$ctrl.sltMasterVal' theme='bootstrap' ng-disabled='disabled' on-select='$ctrl.addSelected($item, $ctrl.currenType, $ctrl.masterStatus)' on-remove='$ctrl.removeSelected($item, $ctrl.currenType, $ctrl.masterStatus)'>" +
    "                <ui-select-match placeholder='点击查询...'>{{$item.name}}</ui-select-match>" +
    "                <ui-select-choices repeat='data in $ctrl.dataList | propsFilter: {name: $select.search}'>" +
    "                    <div ng-bind-html='data.name | highlight: $select.search'></div>" +
    "                </ui-select-choices>" +
    "            </ui-select>" +
    "        </div>" +
    "    </div>" +
    "</div>",
  bindings: {
    label: "@",
    type: "@",
    valList: "<",
    selectedVal: "<",
    sltMasterVal: "<",
    isDefaultReq: "<",
    isColSm: "@",
    isCrtReq: "<",
    isOnlyMaster: "<",
    isMasterCol: "@",
    isShowMaster: "<",
    addFun: "&",
    removeFun: "&"
  },
  controller: function($scope) {
    var ctrl = this;
    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.valList != undefined) {
          ctrl.dataList = data.valList.currentValue;
        }
      } else {
        console.log("mFeatureSelectLine组件数据为空！");
      }
    };
    ctrl.currenType = ctrl.type;
    ctrl.featureStatus = "feature";
    ctrl.masterStatus = "master";
    ctrl.addSelected = function(item, type, status) {
      var sltData = { item: item, type: type, status: status };
      ctrl.addFun({ data: sltData });
    };

    ctrl.removeSelected = function(item, type, status) {
      var sltData = { item: item, type: type, status: status };
      ctrl.removeFun({ data: sltData });
    };
  }
});

//原型语言--table
app.component("mTransformTable", {
  template:
    "<div class='col-sm-12'>" +
    "    <table class='table table-bordered table-hover'>" +
    '        <tr ng-repeat=\'value in $ctrl.transValue track by $index\' ng-style=\'{"font-weight": (value.num ? "normal" : "bold")}\'>' +
    '            <td ng-repeat=\'td in value.elements\' ng-style=\'{"text-decoration": (value.isLink[$index] ? "underline" : "none")}\'>' +
    '                <span ng-style=\'{"color": (value.isUpdate[$index] ? "red" : "")}\' ng-hide=\'td == true\'>{{td}}</span>' +
    "                <input type='checkbox' ng-show='td == true'/>" +
    "            </td>" +
    "        </tr>" +
    "    </table>" +
    "</div>",
  bindings: {
    transValue: "<"
  },
  controller: function($scope, lodash) {
    var ctrl = this;

    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.transValue.currentValue) {
          ctrl.transValue = transformToTable(data.transValue.currentValue);
        }
      }
    };

    function transformToTable(data) {
      var transformType = data.split("\n");

      var transformResult = [];
      var transformContent = lodash.drop(transformType);
      angular.forEach(transformContent, function(content) {
        if (content.match(/([\S\s]*)(End)([\S\s]*)/)) {
          return;
        }
        var lineElements = lodash.compact(content.split(","));
        var lineArray = [];
        lineArray["elements"] = lineElements;
        lineArray["isLink"] = [];
        lineArray["isUpdate"] = [];
        angular.forEach(lineElements, function(elements, index) {
          lineArray["isLink"][index] = null;
          lineArray["isUpdate"][index] = null;
          if (elements.match(/([\S\s]*)(((\|)(\s*)(l)){1})([\S\s]*)/)) {
            lineArray["isLink"][index] = true;
          }
          if (elements.match(/([\S\s]*)(((\|)(\s*)(u)){1})([\S\s]*)/)) {
            lineArray["isUpdate"][index] = true;
          }
          lineArray["elements"][index] =
            lodash.trim(elements) == "[]"
              ? true
              : lodash.trim(
                  elements.replace(/([\S]*?)(\|{1})([\s\S]*)/g, "$1")
                );
        });
        transformResult.push(lineArray);
      });
      for (var i = 0; i < transformResult.length; i++) {
        if (i > 0) {
          transformResult[i]["isLink"] = transformResult[0]["isLink"];
          transformResult[i]["isUpdate"] =
            i == 0 ? transformResult[0]["isUpdate"] : null;
        }
        transformResult[i]["num"] = i;
      }
      return transformResult;
    }
  }
});

//原型语言--tab-table
app.component("mTransformTabTable", {
  template:
    "<div class='col-sm-12'>" +
    "    <ul class='nav nav-tabs' ng-if='!$ctrl.isError'>" +
    "        <li role='presentation' ng-repeat='tab in $ctrl.transValue[0].tabItem track by $index' ng-class='($ctrl.transValue[0].tabActive ? $ctrl.transValue[0].tabActive : 0) == $index ? \"active\" : \"\"'><a href='javascript:void(0)'>{{tab}}</a></li>" +
    "        <span ng-if='$ctrl.transValue[0].textItem.length > 0' class='pull-right'><a style='margin-left: 10px; line-height: 40px; text-align: right;' ng-repeat='text in $ctrl.transValue[0].textItem track by $index'>{{text}}</a></span>" +
    "    </ul>" +
    "    <table class='table table-bordered table-hover' ng-if='!$ctrl.isError'>" +
    '        <tr ng-repeat=\'value in $ctrl.transValue track by $index\' ng-style=\'{"font-weight": (value.num ? "normal" : "bold")}\'>' +
    '            <td ng-repeat=\'td in value.elements\' ng-style=\'{"text-decoration": (value.isLink[$index] ? "underline" : "none")}\'>' +
    '                <span ng-style=\'{"color": (value.isUpdate[$index] ? "red" : "")}\' ng-hide=\'td == true\'>{{td}}</span>' +
    "                <input type='checkbox' ng-show='td == true'/>" +
    "            </td>" +
    "        </tr>" +
    "    </table>" +
    "    <pre ng-if='$ctrl.isError'>{{$ctrl.transValue}}</pre>" +
    "</div>",
  bindings: {
    transValue: "<"
  },
  controller: function($scope, lodash) {
    var ctrl = this;
    ctrl.isError = false;

    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.transValue.currentValue) {
          ctrl.transValue = transformToTabTable(data.transValue.currentValue)
            ? transformToTabTable(data.transValue.currentValue)
            : data.transValue.currentValue;
        }
      }
    };

    function transformToTabTable(data) {
      var transformType = data.split("\n");

      var transformResult = [];
      var itemArray = [];
      var transformContent = lodash.drop(transformType);
      var tabHeader = lodash.head(transformContent);
      var tabItem = tabHeader.split("--");
      itemArray["tabItem"] = [];
      angular.forEach(tabItem[0].split(","), function(tab, index) {
        itemArray["tabItem"].push(
          tab.replace(/([\S]*?)(\|{1})([\s\S]*)/g, "$1")
        );
        if (tab.match(/([\S\s]*)(((\|)(\s*)(v)){1})([\S\s]*)/)) {
          itemArray.tabActive = index;
        }
      });
      if (tabItem[1]) {
        itemArray["textItem"] = lodash.compact(tabItem[1].split(","));
      } else {
        itemArray["textItem"] = [];
      }

      var tabTableContent = lodash.compact(lodash.drop(transformContent));
      angular.forEach(tabTableContent, function(content) {
        if (content.match(/([\S\s]*)(End)([\S\s]*)/)) {
          return;
        }
        var lineArray = [];
        var lineElements = lodash.compact(content.split(","));
        lineArray["elements"] = lineElements;
        lineArray["isLink"] = [];
        lineArray["isUpdate"] = [];
        angular.forEach(lineElements, function(elements, index) {
          lineArray["isLink"][index] = null;
          lineArray["isUpdate"][index] = null;
          lineArray["tabItem"] = itemArray["tabItem"];
          lineArray["textItem"] = itemArray["textItem"];
          lineArray["tabActive"] = itemArray["tabActive"];
          if (elements.match(/([\S\s]*)(((\|)(\s*)(l)){1})([\S\s]*)/)) {
            lineArray["isLink"][index] = true;
          }
          if (elements.match(/([\S\s]*)(((\|)(\s*)(u)){1})([\S\s]*)/)) {
            lineArray["isUpdate"][index] = true;
          }
          lineArray["elements"][index] =
            lodash.trim(elements) == "[]"
              ? true
              : lodash.trim(
                  elements.replace(/([\S]*?)(\|{1})([\s\S]*)/g, "$1")
                );
        });
        transformResult.push(lineArray);
      });
      for (var i = 0; i < transformResult.length; i++) {
        if (i > 0) {
          transformResult[i]["isLink"] = transformResult[0]["isLink"];
          transformResult[i]["isUpdate"] =
            i == 0 ? transformResult[0]["isUpdate"] : null;
        }
        transformResult[i]["num"] = i;
      }
      return transformResult;
    }
  }
});

//原型语言--form
app.component("mTransformForm", {
  template:
    "<div class='form-group'>" +
    "    <div ng-repeat='form in $ctrl.transValue track by $index' class='col-sm-6'>" +
    "        <m-transform-form-item form-type='form.type' form-data='form.value'></m-transform-form-item>" +
    "    </div>" +
    "    <div class='col-sm-12' ng-show='$ctrl.showSearchButton'>" +
    "        <label class='col-sm-1 control-label'>" +
    "            <button class='btn btn-default'><i class='fa fa-search'></i>{{$ctrl.searchButtonText}}</button>" +
    "        </label>" +
    "        <div class='col-sm-5'></div>" +
    "        <div class='col-sm-6'></div>" +
    "    </div>" +
    "    <div class='col-sm-12'><pre ng-show='$ctrl.isError'>{{$ctrl.transValue}}</pre></div>" +
    "</div>",
  bindings: {
    transValue: "<"
  },
  controller: function($scope, lodash) {
    var ctrl = this;
    ctrl.isError = false;

    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.transValue.currentValue) {
          if (transformToForm(data.transValue.currentValue).length > 0) {
            ctrl.isError = false;
            ctrl.transValue = transformToForm(data.transValue.currentValue);
          } else {
            ctrl.isError = true;
            ctrl.transValue = data.transValue.currentValue;
          }
        }
      }
    };

    function transformToForm(data) {
      var transformResult = [];
      var transformType = data.split("\n");
      angular.forEach(lodash.drop(transformType), function(formElements) {
        var elements = formElements.split(":");
        switch (lodash.trim(elements[0])) {
          case "combo-select":
            transformResult.push({ type: "combo-select", value: elements[1] });
            break;
          case "select":
            transformResult.push({
              type: "select",
              value: elements[1].split(",")
            });
            break;
          case "input":
            transformResult.push({ type: "input", value: elements[1] });
            break;
          case "date":
            transformResult.push({
              type: "date",
              value: elements[1].split(";")
            });
            break;
          case "date-to":
            transformResult.push({ type: "dateEnd", value: elements[1] });
            break;
          case "search-button":
            ctrl.showSearchButton = elements[1] ? true : false;
            if (ctrl.showSearchButton) {
              ctrl.searchButtonText = elements[1];
            }
            break;
        }
      });

      return transformResult;
    }
  }
});

//原型语言--form-item
app.component("mTransformFormItem", {
  template:
    "<div class='col-sm-12' ng-show='$ctrl.formType == \"combo-select\"'>" +
    '    <label class=\'col-sm-2 control-label\' ng-style=\'{"background-color": ($ctrl.isUpdate ? "red" : "")}\'>{{$ctrl.comboInputLabel}}：</label>' +
    "    <div class='col-sm-5'>" +
    "        <select class='form-control'>" +
    "            <option value='option'>{{$ctrl.comboInput}}</option>" +
    "        </select>" +
    "    </div>" +
    "    <div class='col-sm-5'>" +
    "        <input type='text' class='form-control' placeholder='请输入...'/>" +
    "    </div>" +
    "</div>" +
    "<div class='col-sm-12' ng-show='$ctrl.formType == \"select\"'>" +
    "    <label class='col-sm-2 control-label'>{{$ctrl.selectLabel}}：</label>" +
    "    <div class='col-sm-10'>" +
    "        <select class='form-control'>" +
    "            <option value='option' ng-repeat='option in $ctrl.sltOption'>{{option}}</option>" +
    "        </select>" +
    "    </div>" +
    "</div>" +
    "<div class='col-sm-12' ng-show='$ctrl.formType == \"input\"'>" +
    "    <label class='col-sm-2 control-label'>{{$ctrl.formData}}：</label>" +
    "    <div class='col-sm-10'>" +
    "        <input type='text' class='form-control' placeholder='请输入...'/>" +
    "    </div>" +
    "</div>" +
    "<div class='col-sm-12' ng-show='$ctrl.formType == \"date\"'>" +
    "    <label class='col-sm-2 control-label'>{{$ctrl.dateLabel}}：</label>" +
    "    <p class='col-sm-10 form-control-static'>" +
    "        请选择&nbsp;&nbsp;&nbsp;" +
    "        <i class='fa fa-calendar'></i>&nbsp;&nbsp;&nbsp;" +
    "        <a ng-show='$ctrl.dateNote' popover='{{$ctrl.dateNote}}' popover-trigger='mouseenter'>备注</a>" +
    "    </p>" +
    "</div>" +
    "<div class='col-sm-12' ng-show='$ctrl.formType == \"dateEnd\"'>" +
    "    <label class='col-sm-2 control-label'>{{$ctrl.formData}}：</label>" +
    "    <p class='col-sm-10 form-control-static'>" +
    "        请选择&nbsp;&nbsp;&nbsp;" +
    "        <i class='fa fa-calendar'></i>&nbsp;&nbsp;&nbsp;~" +
    "        请选择&nbsp;&nbsp;&nbsp;" +
    "        <i class='fa fa-calendar'></i>&nbsp;&nbsp;&nbsp;" +
    "    </p>" +
    "</div>",
  bindings: {
    formType: "<",
    formData: "="
  },
  controller: function($scope, lodash) {
    var ctrl = this;

    if (lodash.trim(ctrl.formType) == "combo-select") {
      if (ctrl.formData.match(/([\S\s]*)(((\|)(\s*)(u)){1})([\S\s]*)/)) {
        ctrl.isUpdate = true;
        ctrl.formData = ctrl.formData.replace(
          /([\S]*?)(\|{1})([\s\S]*)/g,
          "$1"
        );
      } else {
        ctrl.isUpdate = false;
      }
      var combo = ctrl.formData.split(",");
      var inputLabel = combo[0].split("/");
      ctrl.comboInputLabel = lodash.trim(inputLabel[0]);
      if (inputLabel[1]) {
        ctrl.comboInput = inputLabel[1];
      }
    }
    //设置select
    if (lodash.trim(ctrl.formType) == "select") {
      ctrl.selectLabel = ctrl.formData[0];
      ctrl.sltOption = ctrl.formData[1].split("/");
    }
    if (lodash.trim(ctrl.formType) == "date") {
      ctrl.dateLabel = lodash.trim(ctrl.formData[0]);
      ctrl.dateNote = lodash.trim(ctrl.formData[1])
        ? lodash.trim(ctrl.formData[1])
        : null;
    }
  }
});

//原型语言--text
app.component("mTransformToText", {
  template:
    "<div class='form-group'>" +
    "    <div class='col-sm-6' ng-repeat='value in $ctrl.transValue track by $index' ng-show='!$ctrl.isError'>" +
    "        <label class='col-sm-2 control-label'>{{value.title}}：</label> " +
    "        <p class='form-control-static'>{{value.content}}" +
    "            <a ng-show='value.note' popover='{{value.note}}' popover-trigger='mouseenter' style='margin-left: 10px;'>备注</a>" +
    "            <span ng-show='value.update' style='color: red; margin-left: 10px;'>变更</span>" +
    "        </p>" +
    "    </div>" +
    "    <div class='col-sm-12' ng-show='$ctrl.isError'><pre>{{$ctrl.transValue}}</pre></div>" +
    "</div>",
  bindings: {
    transValue: "<"
  },
  controller: function($scope, lodash) {
    var ctrl = this;
    ctrl.isError = false;

    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.transValue.currentValue) {
          if (transformToText(data.transValue.currentValue).length > 0) {
            ctrl.isError = false;
            ctrl.transValue = transformToText(data.transValue.currentValue);
          } else {
            ctrl.isError = true;
            ctrl.transValue = data.transValue.currentValue;
          }
        }
      }
    };

    function transformToText(data) {
      var textArray = [];
      var transformType = data.split("\n");
      angular.forEach(lodash.drop(transformType), function(text) {
        var textType = text.split(",");
        if (textType[1]) {
          var noteType = textType[1].split(";");
          var isUpdate = noteType[1].split("|");
          textArray.push({
            title: lodash.trim(textType[0]),
            content: lodash.trim(noteType[0]),
            note: lodash.trim(isUpdate[0]),
            update: lodash.trim(isUpdate[1]) == "u" ? true : false
          });
        }
      });
      return textArray;
    }
  }
});

//原型语言--flow
app.component("mTransformToFlow", {
  template:
    "<div class='col-sm-12'>" +
    '    <div ng-repeat=\'flow in $ctrl.transValue track by $index\' ng-style=\'{"color": (flow.update ? "red": "")}\'>{{$index + 1}}. {{flow.title}}</div>' +
    "</div>",
  bindings: {
    transValue: "<"
  },
  controller: function($scope, lodash) {
    var ctrl = this;

    ctrl.$onChanges = function(data) {
      if (data) {
        if (data.transValue.currentValue) {
          ctrl.transValue = transformToFlow(data.transValue.currentValue);
        }
      }
    };

    function transformToFlow(data) {
      var flowArray = [];
      var transformType = data.split("\n");
      angular.forEach(lodash.drop(transformType), function(flow) {
        var flowType = flow.split("|");
        flowArray.push({
          title: lodash.trim(flowType[0]),
          update: lodash.trim(flowType[1]) == "u" ? true : false
        });
      });
      return flowArray;
    }
  }
});

//原型语言组件
app.component("mTransformContent", {
  template:
    "<div>" +
    "    <pre ng-if='$ctrl.type == \"other\"'>{{$ctrl.transData}}</pre>" +
    "    <m-transform-tab-table ng-if='$ctrl.type == \"tab-table\"' trans-value='$ctrl.transData'></m-transform-tab-table>" +
    "    <m-transform-to-flow ng-if='$ctrl.type == \"flow\"' trans-value='$ctrl.transData'></m-transform-to-flow>" +
    "    <m-transform-form ng-if='$ctrl.type == \"form\"' trans-value='$ctrl.transData'></m-transform-form>" +
    "    <m-transform-to-text ng-if='$ctrl.type == \"text-form\"' trans-value='$ctrl.transData'></m-transform-to-text>" +
    "    <m-transform-table ng-if='$ctrl.type == \"table\"' trans-value='$ctrl.transData'><m-transform-table>" +
    "</div>",
  bindings: {
    transType: "<",
    transData: "="
  },
  controller: function($scope, lodash) {
    var ctrl = this;
    ctrl.type = lodash.trim(ctrl.transType);
  }
});

//流程图组件
app.component("winitDiagram", {
  template:
    "<div class='col-sm-12'>" +
    "    <div class='col-sm-11' id='{{$ctrl.diagramId}}diagramContent' style='background-color: white;'>" +
    "        <div><i id='{{$ctrl.diagramId}}fullscreen' class='glyphicon glyphicon-fullscreen pull-right' ng-hide='showLegend' ng-click='requestFullScreen()' style='z-index: 9999; font-size: 20px; margin: 15px 15px 0px 0px;' title='全屏'></i><i id='{{$ctrl.diagramId}}resize' class='glyphicon glyphicon-resize-small pull-right' ng-hide='showLegend' ng-click='exitFullscreen()' style='z-index: 9999; font-size: 20px; margin: 15px 15px 0px 0px; display: none;' title='退出全屏'></i></div>" +
    "        <div id='{{$ctrl.diagramId}}' class='col-sm-12' style='height: 400px; border: 1px solid #dee5e7; margin-top: -20px;'></div>" +
    "    </div>" +
    "    <div class='col-sm-1'></div>" +
    "</div>",
  bindings: {
    diagramData: "<",
    diagramId: "="
  },
  controller: function($scope, $timeout) {
    var ctrl = this;
    var $ = go.GraphObject.make;
    var diagram;

    ctrl.$onChanges = function() {
      if (ctrl.diagramData) {
        if (ctrl.diagramData.attrs) {
          ctrl.diagramDataAttrs = ctrl.diagramData.attrs;
        } else {
          ctrl.diagramDataAttrs = {
            nodeDataArray: [],
            linkDataArray: []
          };
        }
        if (diagram) {
          diagram.model = new go.GraphLinksModel(
            ctrl.diagramDataAttrs.nodeDataArray,
            ctrl.diagramDataAttrs.linkDataArray
          );
        }
      }
    };
    $scope.requestFullScreen = function() {
      var elem = document.getElementById(
        "" + ctrl.diagramId + "diagramContent"
      );
      var heightDiagram = document.body.clientWidth;
      document.getElementById("" + ctrl.diagramId + "").style.height =
        heightDiagram + "px";
      document.getElementById(
        "" + ctrl.diagramId + "fullscreen"
      ).style.display =
        "none";
      document.getElementById("" + ctrl.diagramId + "resize").style.display =
        "inline-block";
      requestFullScreen(elem);
    };

    function requestFullScreen(element) {
      var requestMethod =
        element.requestFullScreen ||
        element.webkitRequestFullScreen ||
        element.mozRequestFullScreen ||
        element.msRequestFullScreen;
      if (requestMethod) {
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    }

    $scope.exitFullscreen = function() {
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
      document.getElementById("" + ctrl.diagramId + "").style.height = "400px";
      document.getElementById(
        "" + ctrl.diagramId + "fullscreen"
      ).style.display =
        "inline-block";
      document.getElementById("" + ctrl.diagramId + "resize").style.display =
        "none";
    };

    document.addEventListener("mozfullscreenchange", function(e) {
      setStyle(e.currentTarget.mozFullScreen);
    });
    document.addEventListener("webkitfullscreenchange", function(e) {
      setStyle(e.currentTarget.webkitIsFullScreen);
    });
    document.addEventListener("msfullscreenchange", function(e) {
      console.log("msfullscreenchange", e);
    });

    function setStyle(type) {
      if (type == false) {
        $scope.exitFullscreen();
      }
    }

    $scope.$watch("$viewContentLoaded", function() {
      $timeout(function() {
        diagram = $(go.Diagram, ctrl.diagramId, {
          "toolManager.mouseWheelBehavior": go.ToolManager.WheelNone, //鼠标滚轮放大缩小
          nodeTemplate: $(go.Node, "Auto", {
            selectable: false
          }),
          linkTemplate: $(
            go.Link,
            {
              routing: go.Link.AvoidsNodes,
              curve: go.Link.JumpOver,
              corner: 5,
              toShortLength: 4,
              relinkableFrom: true,
              relinkableTo: true,
              reshapable: true,
              resegmentable: true,
              selectable: true,
              mouseEnter: function(e, link) {
                link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
              },
              mouseLeave: function(e, link) {
                link.findObject("HIGHLIGHT").stroke = "transparent";
              }
            },
            $(go.Shape, {
              isPanelMain: true,
              strokeWidth: 8,
              stroke: "transparent",
              name: "HIGHLIGHT"
            }),
            $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
            $(go.Shape, { toArrow: "standard", stroke: null, fill: "gray" }),
            $(
              go.Panel,
              "Auto",
              {
                visible: false,
                name: "LABEL",
                segmentIndex: 2,
                segmentFraction: 0.5
              },
              new go.Binding("visible", "visible").makeTwoWay(),
              $(go.Shape, "RoundedRectangle", {
                fill: "#F8F8F8",
                stroke: null
              }),
              $(
                go.TextBlock,
                "Yes",
                {
                  textAlign: "center",
                  font: "10pt helvetica, arial, sans-serif",
                  stroke: "#333333",
                  editable: true
                },
                new go.Binding("text").makeTwoWay()
              )
            )
          ),
          initialContentAlignment: go.Spot.MiddleTop,
          allowDrop: true,
          scrollsPageOnFocus: false,
          allowCopy: true, //不允许在流程里面复制节点
          isReadOnly: true,
          "undoManager.isEnabled": true
        });
        var lightText = "whitesmoke";

        //设置节点样式
        function nodeStyle() {
          return [
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
              go.Point.stringify
            ),
            {
              locationSpot: go.Spot.Center,
              mouseEnter: function(e, obj) {
                showPorts(obj.part, true);
              },
              mouseLeave: function(e, obj) {
                showPorts(obj.part, false);
              }
            }
          ];
        }

        //设置节点上下左右的连接点
        function makePort(name, spot, output, input) {
          return $(go.Shape, "Circle", {
            fill: "transparent",
            stroke: null,
            desiredSize: new go.Size(8, 8),
            alignment: spot,
            alignmentFocus: spot,
            portId: name,
            fromSpot: spot,
            toSpot: spot,
            fromLinkable: output,
            toLinkable: input,
            cursor: "pointer"
          });
        }

        //颜色
        var bluegrad = $(go.Brush, "Linear", { 0: "#C4ECFF", 1: "#70D4FF" });

        //模板局部样式
        var actionTemplate = $(
          go.Panel,
          "Horizontal",
          $(
            go.Shape,
            { width: 12, height: 12 },
            new go.Binding("figure"),
            new go.Binding("fill")
          ),
          $(
            go.TextBlock,
            { font: "10pt Verdana, sans-serif", editable: true },
            new go.Binding("text").makeTwoWay()
          )
        );

        /**
         * 为节点模板添加自定义的节点样式
         * 类型：长方形可输入文本框
         */
        diagram.nodeTemplateMap.add(
          "",
          $(
            go.Node,
            "Spot",
            nodeStyle(),
            $(
              go.Panel,
              "Auto",
              $(
                go.Shape,
                "Rectangle",
                { fill: "#edf1f2", stroke: null },
                new go.Binding("figure", "figure")
              ),
              $(
                go.TextBlock,
                {
                  font: "bold 11pt Helvetica, Arial, sans-serif",
                  stroke: "#454545",
                  margin: 8,
                  maxSize: new go.Size(160, NaN),
                  wrap: go.TextBlock.WrapFit,
                  editable: true
                },
                new go.Binding("text").makeTwoWay()
              )
            ),
            //设置节点的连接点
            makePort("T", go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, true),
            makePort("B", go.Spot.Bottom, true, false)
          )
        );

        /**
         * 开始节点
         */
        diagram.nodeTemplateMap.add(
          "Start",
          $(
            go.Node,
            "Spot",
            nodeStyle(),
            $(
              go.Panel,
              "Auto",
              $(go.Shape, "Circle", {
                minSize: new go.Size(40, 40),
                fill: "#edf1f2",
                stroke: null
              }),
              $(
                go.TextBlock,
                "Start",
                {
                  font: "bold 11pt Helvetica, Arial, sans-serif",
                  stroke: "#454545"
                },
                new go.Binding("text")
              )
            ),
            makePort("L", go.Spot.Left, true, false),
            makePort("R", go.Spot.Right, true, false),
            makePort("B", go.Spot.Bottom, true, false)
          )
        );

        /**
         * 结束节点
         */
        diagram.nodeTemplateMap.add(
          "End",
          $(
            go.Node,
            "Spot",
            nodeStyle(),
            $(
              go.Panel,
              "Auto",
              $(go.Shape, "Circle", {
                minSize: new go.Size(40, 40),
                fill: "#edf1f2",
                stroke: null
              }),
              $(
                go.TextBlock,
                "Start",
                {
                  font: "bold 11pt Helvetica, Arial, sans-serif",
                  stroke: "#454545"
                },
                new go.Binding("text")
              )
            ),
            makePort("T", go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, false, true),
            makePort("R", go.Spot.Right, false, true)
          )
        );

        /**
         * comment节点
         */
        diagram.nodeTemplateMap.add(
          "Comment",
          $(
            go.Node,
            "Auto",
            nodeStyle(),
            $(go.Shape, "File", { fill: "#EFFAB4", stroke: null }),
            $(
              go.TextBlock,
              {
                margin: 5,
                maxSize: new go.Size(200, NaN),
                wrap: go.TextBlock.WrapFit,
                textAlign: "center",
                editable: true,
                font: "bold 12pt Helvetica, Arial, sans-serif",
                stroke: "#454545"
              },
              new go.Binding("text").makeTwoWay()
            )
          )
        );

        /**
         * 自定义节点图例
         */
        diagram.nodeTemplateMap.add(
          "formula",
          $(
            go.Node,
            "Auto",
            nodeStyle(),
            {
              mouseDragEnter: function(e, grp, prev) {
                highlightGroup(e, grp, true);
              },
              mouseDragLeave: function(e, grp, next) {
                highlightGroup(e, grp, false);
              }
              //mouseDrop: finishDrop,
            },
            $(go.Shape, "RoundedRectangle", {
              fill: "white",
              stroke: "white",
              margin: new go.Margin(5, 5, 5, 5)
            }),
            new go.Binding("background", "isHighlighted", function(h) {
              return h ? "#DC3C00" : "#edf1f2";
            }).ofObject(),
            $(
              go.Panel,
              "Vertical",
              {
                stretch: go.GraphObject.Horizontal,
                background: "#edf1f2",
                margin: new go.Margin(5, 5, 5, 5)
              },
              new go.Binding("background", "isHighlighted", function(h) {
                var crtColor = "";
                var updateColor = "#f7df66",
                  defaultColor = "#edf1f2",
                  flowColor = "#CD96CD",
                  nodeUpdateColor = "#EE6363";
                switch (h) {
                  case "flow":
                    crtColor = nodeUpdateColor;
                    break;
                  case "ADD":
                    crtColor = nodeUpdateColor;
                    break;
                  case "isRelate":
                    crtColor = updateColor;
                    break;
                  default:
                    crtColor = defaultColor;
                }
                return crtColor;
              }).makeTwoWay(),
              $(
                go.Panel,
                "Table",
                { stretch: go.GraphObject.Horizontal },
                $(
                  go.TextBlock,
                  {
                    alignment: go.Spot.Left,
                    margin: new go.Margin(5, 0, 5, 5),
                    stroke: "#58666e",
                    font: "10pt Verdana, sans-serif"
                  },
                  new go.Binding("text", "text").makeTwoWay()
                )
              ),
              $(
                go.Panel,
                "Table",
                { stretch: go.GraphObject.Horizontal },
                $(
                  go.TextBlock,
                  {
                    alignment: go.Spot.Left,
                    margin: new go.Margin(5, 0, 5, 5),
                    stroke: "#58666e",
                    font: "8pt Verdana, sans-serif"
                  },
                  new go.Binding("text", "sys").makeTwoWay()
                ),
                $("PanelExpanderButton", "COLLAPSIBLE", {
                  column: 1,
                  alignment: go.Spot.Left,
                  margin: new go.Margin(0, 10, 0, 0)
                })
              ),
              $(
                go.Panel,
                "Table",
                {
                  name: "COLLAPSIBLE",
                  visible: false,
                  stretch: go.GraphObject.Horizontal,
                  itemTemplate: actionTemplate
                },
                $(
                  go.TextBlock,
                  textStyle(),
                  { row: 1, column: 0 },
                  new go.Binding("text", "nodeType", function(nodeType) {
                    return nodeType == "flow" ? "名称：" : "功能点名称：";
                  }).makeTwoWay()
                ),
                $(
                  go.TextBlock,
                  textStyle(),
                  {
                    row: 1,
                    column: 1,
                    columnSpan: 4,
                    editable: true,
                    isMultiline: false,
                    minSize: new go.Size(10, 14),
                    margin: new go.Margin(0, 0, 5, 3)
                  },
                  new go.Binding("text", "relate_name").makeTwoWay()
                ),
                $(
                  go.TextBlock,
                  textStyle(),
                  { row: 2, column: 0 },
                  new go.Binding("text", "nodeType", function(nodeType) {
                    return nodeType == "flow" ? "场景：" : "菜单路径：";
                  }).makeTwoWay()
                ),
                $(
                  go.TextBlock,
                  textStyle(),
                  {
                    row: 2,
                    column: 1,
                    columnSpan: 4,
                    editable: true,
                    isMultiline: false,
                    minSize: new go.Size(10, 14),
                    margin: new go.Margin(0, 0, 5, 3)
                  },
                  new go.Binding("text", "relate_path").makeTwoWay()
                )
              )
            ),
            makePort("T", go.Spot.Top, true, true),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, true),
            makePort("B", go.Spot.Bottom, true, true)
          )
        );

        /**
         * 线
         */
        diagram.nodeTemplateMap.add(
          "Line",
          $(
            go.Node,
            "Spot",
            nodeStyle(),
            {
              locationSpot: go.Spot.Center,
              locationObjectName: "SHAPE",
              selectionAdorned: false,
              resizable: true,
              resizeObjectName: "SHAPE",
              rotatable: true,
              rotateObjectName: "SHAPE",
              layoutConditions:
                go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
            },
            new go.Binding("width", "length").makeTwoWay(),
            $(go.Shape, {
              figure: "LineH",
              strokeWidth: 5,
              stroke: "lightcoral",
              interval: 10
            })
          )
        );

        go.Shape.defineFigureGenerator("LineH", function(shape, w, h) {
          var geo = new go.Geometry(go.Geometry.Line);
          geo.startX = 0;
          geo.startY = h / 2;
          geo.endX = w;
          geo.endY = h / 2;
          return geo;
        });

        /**
         * 竖线
         */
        diagram.nodeTemplateMap.add(
          "vLine",
          $(
            go.Node,
            "Spot",
            nodeStyle(),
            {
              locationSpot: go.Spot.Center,
              locationObjectName: "SHAPE",
              selectionAdorned: false,
              resizable: true,
              resizeObjectName: "SHAPE",
              rotatable: true,
              rotateObjectName: "SHAPE",
              layoutConditions:
                go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
            },
            new go.Binding("height", "length").makeTwoWay(),
            $(go.Shape, {
              figure: "LineV",
              strokeWidth: 5,
              stroke: "lightcoral",
              interval: 10
            })
          )
        );

        go.Shape.defineFigureGenerator("LineV", function(shape, w, h) {
          var geo = new go.Geometry(go.Geometry.Line);
          geo.startX = w / 2;
          geo.startY = 0;
          geo.endX = w / 2;
          geo.endY = h;
          return geo;
        });

        /**
         * user
         */
        diagram.nodeTemplateMap.add(
          "User",
          $(
            go.Node,
            "Spot",
            nodeStyle(),
            {
              locationSpot: go.Spot.Center,
              locationObjectName: "BpmnTaskUser",
              selectionAdorned: false,
              //resizable: true,   //是否允许缩放
              resizeObjectName: "BpmnTaskUser",
              //rotatable: true,   //是否允许旋转
              rotateObjectName: "BpmnTaskUser",
              layoutConditions:
                go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
            },
            $(
              go.Panel,
              "Vertical",
              $(
                go.Shape,
                "BpmnTaskUser",
                {
                  alignmentFocus: go.Spot.TopLeft,
                  fill: "#edf1f2",
                  width: 30,
                  height: 30
                },
                new go.Binding(
                  "figure",
                  "taskType",
                  nodeActivityTaskTypeConverter
                )
              ),
              $(
                go.TextBlock,
                {
                  font: "bold 11pt Helvetica, Arial, sans-serif",
                  margin: new go.Margin(8, 8, 8, 8),
                  maxSize: new go.Size(160, NaN),
                  wrap: go.TextBlock.WrapFit,
                  editable: true
                },
                new go.Binding("text").makeTwoWay()
              )
            )
          )
        );

        go.Shape.defineFigureGenerator("BpmnTaskUser", function(shape, w, h) {
          var geo = new go.Geometry();
          var fig = new go.PathFigure(0, 0, false);
          geo.add(fig);
          var fig2 = new go.PathFigure(0.335 * w, (1 - 0.555) * h, true);
          geo.add(fig2);
          // Shirt
          fig2.add(
            new go.PathSegment(go.PathSegment.Line, 0.335 * w, (1 - 0.405) * h)
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Line,
              (1 - 0.335) * w,
              (1 - 0.405) * h
            )
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Line,
              (1 - 0.335) * w,
              (1 - 0.555) * h
            )
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Bezier,
              w,
              0.68 * h,
              (1 - 0.12) * w,
              0.46 * h,
              (1 - 0.02) * w,
              0.54 * h
            )
          );
          fig2.add(new go.PathSegment(go.PathSegment.Line, w, h));
          fig2.add(new go.PathSegment(go.PathSegment.Line, 0, h));
          fig2.add(new go.PathSegment(go.PathSegment.Line, 0, 0.68 * h));
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Bezier,
              0.335 * w,
              (1 - 0.555) * h,
              0.02 * w,
              0.54 * h,
              0.12 * w,
              0.46 * h
            )
          );
          // Start of neck
          fig2.add(
            new go.PathSegment(go.PathSegment.Line, 0.365 * w, (1 - 0.595) * h)
          );
          var radiushead = 0.5 - 0.285;
          var centerx = 0.5;
          var centery = radiushead;
          var alpha2 = Math.PI / 4;
          var KAPPA = 4 * (1 - Math.cos(alpha2)) / (3 * Math.sin(alpha2));
          var cpOffset = KAPPA * 0.5;
          var radiusw = radiushead;
          var radiush = radiushead;
          var offsetw = KAPPA * radiusw;
          var offseth = KAPPA * radiush;
          // Circle (head)
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Bezier,
              (centerx - radiusw) * w,
              centery * h,
              (centerx - (offsetw + radiusw) / 2) * w,
              (centery + (radiush + offseth) / 2) * h,
              (centerx - radiusw) * w,
              (centery + offseth) * h
            )
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Bezier,
              centerx * w,
              (centery - radiush) * h,
              (centerx - radiusw) * w,
              (centery - offseth) * h,
              (centerx - offsetw) * w,
              (centery - radiush) * h
            )
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Bezier,
              (centerx + radiusw) * w,
              centery * h,
              (centerx + offsetw) * w,
              (centery - radiush) * h,
              (centerx + radiusw) * w,
              (centery - offseth) * h
            )
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Bezier,
              (1 - 0.365) * w,
              (1 - 0.595) * h,
              (centerx + radiusw) * w,
              (centery + offseth) * h,
              (centerx + (offsetw + radiusw) / 2) * w,
              (centery + (radiush + offseth) / 2) * h
            )
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Line,
              (1 - 0.365) * w,
              (1 - 0.595) * h
            )
          );
          // Neckline
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Line,
              (1 - 0.335) * w,
              (1 - 0.555) * h
            )
          );
          fig2.add(
            new go.PathSegment(
              go.PathSegment.Line,
              (1 - 0.335) * w,
              (1 - 0.405) * h
            )
          );
          fig2.add(
            new go.PathSegment(go.PathSegment.Line, 0.335 * w, (1 - 0.405) * h)
          );
          var fig3 = new go.PathFigure(0.2 * w, h, false);
          geo.add(fig3);
          // Arm lines
          fig3.add(new go.PathSegment(go.PathSegment.Line, 0.2 * w, 0.8 * h));
          var fig4 = new go.PathFigure(0.8 * w, h, false);
          geo.add(fig4);
          fig4.add(new go.PathSegment(go.PathSegment.Line, 0.8 * w, 0.8 * h));
          return geo;
        });

        function nodeActivityTaskTypeConverter(s) {
          var tasks = ["BpmnTaskUser"];
          if (s < tasks.length) return tasks[s];
          return "NotAllowed"; // error
        }

        function highlightGroup(e, grp, show) {
          if (!grp) return;
          e.handled = true;
          grp.isHighlighted = false;
        }

        function textStyle() {
          return { font: "9pt sans-serif", stroke: "#58666e" };
        }

        function showPorts(node, show) {
          var diagram = node.diagram;
          if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
          node.ports.each(function(port) {
            port.stroke = show ? "black" : null;
          });
        }

        diagram.linkTemplate = $(
          go.Link,
          {
            routing: go.Link.AvoidsNodes,
            curve: go.Link.JumpOver,
            corner: 5,
            toShortLength: 4,
            relinkableFrom: true,
            relinkableTo: true,
            reshapable: true,
            resegmentable: true,
            mouseEnter: function(e, link) {
              link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
            },
            mouseLeave: function(e, link) {
              link.findObject("HIGHLIGHT").stroke = "transparent";
            }
          },
          new go.Binding("points").makeTwoWay(),
          $(go.Shape, {
            isPanelMain: true,
            strokeWidth: 8,
            stroke: "transparent",
            name: "HIGHLIGHT"
          }),
          $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
          $(go.Shape, { toArrow: "standard", stroke: null, fill: "gray" }),
          $(
            go.Panel,
            "Auto",
            {
              visible: false,
              name: "LABEL",
              segmentIndex: 2,
              segmentFraction: 0.5
            },
            $(go.Shape, "RoundedRectangle", { fill: "#F8F8F8", stroke: null }),
            $(
              go.TextBlock,
              "Yes",
              {
                textAlign: "center",
                font: "10pt helvetica, arial, sans-serif",
                stroke: "#333333",
                editable: true
              },
              new go.Binding("text").makeTwoWay()
            ),
            new go.Binding("visible", "visible").makeTwoWay()
          )
        );
        diagram.model = new go.GraphLinksModel(
          ctrl.diagramDataAttrs.nodeDataArray,
          ctrl.diagramDataAttrs.linkDataArray
        );
      });
    });
  }
});

//settings
app.component("winitSettings", {
  templateUrl: getTemplateUrl("matrix/component/tpl/winitSettings.html"),
  bindings: {
    tableScope: "<",
    searchEle: "=",
    selectList: "=",
    uiSltList: "=",
    switchList: "=",
    btnList: "=",
    treeSlt: "=",
    sett: "=",
    dateRadios: "<"
  },
  controller: function($scope, $timeout, $filter) {
    var ctrl = this;
    console.log(ctrl);
    $scope.setting = {};

    $scope.setting.tableScope = ctrl.tableScope;
    // $scope.$watch('setting.tableScope', function (newVal) {
    //     $scope.setting.tableScope = ctrl.tableScope;
    // })

    $scope.setting.isSelectCloumn = ctrl.tableScope ? true : false;

    $scope.setting.search = ctrl.searchEle ? ctrl.searchEle : { show: false };

    $scope.setting.selectList = ctrl.selectList ? ctrl.selectList : [];

    $scope.setting.uiSltList = ctrl.uiSltList ? ctrl.uiSltList : [];

    $scope.setting.btnList = ctrl.btnList ? ctrl.btnList : [];

    $scope.setting.switchList = ctrl.switchList ? ctrl.switchList : [];

    $scope.setting.dateRadios = ctrl.dateRadios ? ctrl.dateRadios : {};

    if (ctrl.sett) {
      ctrl.sett = $scope.setting;
    }

    $scope.$watch("$viewContentLoaded", function() {
      $timeout(function() {
        if (getSettingStatus()) {
          document.getElementById("settingBtn").click();
        }
        $scope.setting.treeSlt = ctrl.treeSlt ? ctrl.treeSlt : { show: false };
      });
    });

    $scope.click = function() {
      setSettingStatus($("#settingBtn").hasClass("active"));
    };

    $scope.dateRadioClick = function(value) {
      if (value.key == 0) {
        $scope.setting.dateRadios.func(null);
        return;
      }
      var now = new Date(
        $filter("date")(new Date(), "yyyy-MM-dd").replace(/\-/g, "/")
      );
      var perMonth = new Date(now.setMonth(now.getMonth() - value.key));
      $scope.setting.dateRadios.func(Date.parse(perMonth));
    };
    ctrl.$onChanges = function() {
      $scope.setting.tableScope = ctrl.tableScope;
      if ($scope.setting.dateRadios.init) {
        ctrl.radioIem = $scope.setting.dateRadios.init;
        $scope.dateRadioClick({ key: ctrl.radioIem });
      }
    };
  }
});

//面包屑
app.component("winitBreadcrumb", {
  templateUrl: getTemplateUrl("matrix/component/tpl/winitBreadcrumb.html"),
  bindings: {
    menuList: "="
  },
  controller: function($scope) {
    var ctrl = this;
    ctrl.list = [];
    $scope.menuList = ctrl.menuList;
    if (ctrl.menuList) {
      angular.forEach(ctrl.menuList, function(menu) {
        var obj = { name: menu, url: menumap[menu] };
        ctrl.list.push(obj);
      });
    }
    $scope.$watch(
      "menuList",
      function() {
        if (ctrl.menuList) {
          ctrl.list = [];
          angular.forEach(ctrl.menuList, function(menu) {
            var obj = { name: menu, url: menumap[menu] };
            ctrl.list.push(obj);
          });
        }
      },
      true
    );

    $scope.click = function(url) {
      if (url) {
        window.location.href = url;
      }
    };
  }
});

//数据饼图
app.component("winitChart", {
  template:
    "<div ui-jq='plot' ui-refresh='showSpline' ui-options='{{$ctrl.chartData}}, {{$ctrl.chartOption}}' style='min-width: 50px; height: 240px;'>" +
    "</div>",
  bindings: {
    chartData: "<",
    chartOption: "<"
  },
  controller: function($scope) {
    var ctrl = this;
  }
});

app.component("winitPriorityRzslider", {
  // template: "<rzslider class='matrix-vertical-slider' rz-slider-model='$ctrl.data' rz-slider-options='$ctrl.options'></rzslider>",
  template:
    "<rzslider class='matrix-slider' rz-slider-model='$ctrl.data' rz-slider-options='$ctrl.options'></rzslider>",
  bindings: {
    data: "=",
    options: "<",
    isDisabled: "<"
  },
  controller: function($scope) {
    var ctrl = this;
    console.log(ctrl);
      ctrl.$onChanges = function () {
          ctrl.options.readOnly=ctrl.isDisabled;
      };
    ctrl.options = {
      ceil: 4,
      showSelectionBar: true,
      vertical: false,
      readOnly: ctrl.isDisabled,
      getSelectionBarColor: function(value) {
        if (value >= 4) return "red";
        if (value >= 3) return "#ff00da";
        if (value >= 2) return "orange";
        if (value >= 1) return "yellow";
        return "#2AE02A";
      },
      getPointerColor: function(value) {
        if (value >= 4) return "red";
        if (value >= 3) return "#ff00da";
        if (value >= 2) return "orange";
        if (value >= 1) return "yellow";
        return "#2AE02A";
      },
      translate: function(value, id, which) {
        if (value >= 4) return "高";
        if (value >= 3) return "较高";
        if (value >= 2) return "中";
        if (value >= 1) return "较低";
        return "低";
      }
    };
  }
});

app.component("winitCycleRzslider", {
  template:
    "<rzslider class='matrix-slider' rz-slider-model='$ctrl.data' rz-slider-options='$ctrl.options'></rzslider>",
  bindings: {
    data: "=",
    isDisabled: "<"
  },
  controller: function($scope) {
    var ctrl = this;
      ctrl.$onChanges = function () {
          ctrl.options.readOnly=ctrl.isDisabled;
      };
    ctrl.options = {
      floor: 0,
      ceil: 100,
      step: 1,
      minRange: 10,
      maxRange: 50,
      readOnly: ctrl.isDisabled
    };
  }
});
